<template>
	<view class="container" v-if="!$u.test.isEmpty(dataInfo)">
		<view class="status">{{dataInfo.state_text}}</view>
		
		<view class="address flex-center">
			<u-icon name="map-fill" color="#ffffff" size="36"></u-icon>
			<view>收货地址：{{dataInfo.address.region.province}}{{dataInfo.address.region.city}}{{dataInfo.address.region.region}}{{dataInfo.address.detail}}{{dataInfo.address.house_number?dataInfo.address.house_number:''}}</view>
		</view>
		
		<view class="map">
			<map :include-points="includePoints" :markers="markers"></map>
		</view>
		
		<view class="time bg-fff" v-if="dataInfo.pay_time>0">
			<view class="time-top" v-if="dataInfo.isyy==0">预计<text>{{dataInfo.pay_time | date("hh:MM")}}-{{$filter.sendTime(sendTime, dataInfo.pay_time)}}</text>送达</view>
			<view class="time-top" v-if="dataInfo.isyy==1">预约<text>{{dataInfo.yypstime | date("yy年m月d日 hh:MM")}}</text>送达</view>
			<!-- <view class="time-tips">慢赔付：{{$filter.sendTime(sendTime, dataInfo.pay_time)}}未送达，送达后可获赔10元红包</view> -->
		</view>
		
		<view class="item bg-fff">
			<!-- <view class="item-shop flex-space-between" @click="jump('/pages/shop/shop_info?shop_supplier_id='+dataInfo.supplier.shop_supplier_id)">
				<view class="item-shop-name">{{dataInfo.supplier.name}}</view>
				<u-icon name="arrow-right" size="28rpx" color="#333333"></u-icon>
			</view> -->
			<view class="product-item flex" v-for="(it,idx) in dataInfo.product" :key="idx" @click="goToProduct(it.is_click,it.product_id,it.product_type,it.activity_product_id)">
				<image class="product-item-image" :src="it.image.file_path"></image>
				<view class="product-item-con">
					<view class="product-item-name u-line-1">{{it.product_name}}</view>
					<view class="product-item-suk">{{it.product_attr}}</view>
					<view class="flex-space-between">
						<view class="product-item-num">x{{it.total_num}}</view>
						<view class="product-item-price">￥{{it.product_price}}</view>
					</view>
				</view>
			</view>
			<view v-if="gift_product_order" class="product-item flex product-item-gift">
				<image style="width: 100rpx;height: 100rpx;" :src="gift_product_order.file.file_path"></image>
				<view class="product-item-con">
					<view class="product-item-name u-line-1">{{gift_product_order.gift_product.product_name}}</view>
					<view class="product-item-suk"></view>
					<view class="flex-space-between">
						<view class="product-item-num">x1</view>
						<view class="product-item-price">赠品</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="total bg-fff">
			<view class="total-item flex-space-between">
				<view>商品小计</view>
				<view>￥{{dataInfo.total_price}}</view>
			</view>
			<view class="total-item flex-space-between">
				<view>优惠</view>
				<view>￥{{dataInfo.coupon_money_sys}}</view>
			</view>
			<view class="total-item flex-space-between">
				<view>应付金额合计</view>
				<text>￥{{dataInfo.pay_price}}</text>
			</view>
		</view>
		
		<view class="info bg-fff">
			<view class="info-item flex-space-between">
				<view class="info-item-label">订单号码</view>
				<view class="info-item-value flex-align-center" @click="handleCopy(dataInfo.order_no)">
					<text>{{dataInfo.order_no}}</text>
					<view>
						<u-icon name="file-text" size="28rpx" color="#333333"></u-icon>
					</view>
				</view>
			</view>
			<view class="info-item flex-space-between">
				<view class="info-item-label">收货信息</view>
				<view class="info-item-value">{{dataInfo.address.region.province}}{{dataInfo.address.region.city}}{{dataInfo.address.region.region}}{{dataInfo.address.detail}}{{dataInfo.address.house_number?dataInfo.address.house_number:''}}</view>
			</view>
			<view class="info-item flex-space-between">
				<view class="info-item-label">收货人</view>
				<view class="info-item-value">{{dataInfo.address.name}}  {{dataInfo.address.phone}}</view>
			</view>
			<view class="info-item flex-space-between">
				<view class="info-item-label">备注</view>
				<view class="info-item-value">{{dataInfo.buyer_remark}}</view>
			</view>
			<view class="info-item flex-space-between">
				<view class="info-item-label">送达时间</view>
				<view class="info-item-value" v-if="dataInfo.isyy==0">
					尽快送达 
					<template v-if="dataInfo.pay_time>0">
						[{{dataInfo.pay_time | date("hh:MM")}}-{{$filter.sendTime(sendTime, dataInfo.pay_time)}}]
					</template>
				</view>
				<view class="info-item-value" v-if="dataInfo.isyy==1">预约送达时间 [{{dataInfo.yypstime | date("yy年m月d日 hh:MM")}}]</view>
			</view>
			<view class="info-item flex-space-between">
				<view class="info-item-label">配送方式</view>
				<view class="info-item-value">酒秒达骑士专送</view>
			</view>
			<view class="info-item flex-space-between">
				<view class="info-item-label">配送骑士</view>
				<view class="info-item-value flex-space-between" v-if="!$u.test.isEmpty(dataInfo.deliveryUser)" @click="handlePhone(dataInfo.deliveryUser.mobile)">{{dataInfo.deliveryUser.real_name}} {{dataInfo.deliveryUser.mobile}}
					<image style="width: 30rpx;height: 30rpx;" :src="$setting.imageUrl()+'Phone.png'"></image>
				</view>
			</view>
			<view class="info-item flex-space-between" v-if="dataInfo.store_remarks">
				<view class="info-item-label">骑士备注</view>
				<view class="info-item-value flex-space-between">{{dataInfo.store_remarks}}
				</view>
			</view>
			<!-- <view class="user-item flex-align-center">
					<view class="user-name">{{dataInfo.address.name}}</view>
				</view> -->
			<!-- <view class="info-item flex-space-between">
				<view class="info-item-label">支付方式</view>
				<view class="info-item-value">{{dataInfo.pay_type.text}}</view>
			</view> -->
			<view class="info-item flex-space-between">
				<view class="info-item-label">下单时间</view>
				<view class="info-item-value">{{dataInfo.create_time}}</view>
			</view>
			
			<view class="info-item flex-space-between" v-if="dataInfo.is_order_refund > 0">
				<view class="info-item-label">售后状态</view>
				<view class="info-item-value">
					<text v-if="dataInfo.is_order_refund == 1">售后已申请</text>
					<text v-if="dataInfo.is_order_refund == 2">售后已通过</text>
					<text v-if="dataInfo.is_order_refund == 3">售后已拒绝</text>
				</view>
			</view>
		</view>
		
		<view class="fixed-bottom-placeholder"></view>
		<safe-area-inset-bottom></safe-area-inset-bottom>
		
		<view class="fixed-bottom bg-fff">
			<view class="fixed-bottom-con flex-align-center">
					<b-u-button-theme-plain  width="160rpx" height="64rpx" size="26rpx" style="margin-left: 14rpx;" v-if="dataInfo.order_status.value == 10 && dataInfo.pay_status.value == 10" @click.stop="handleCancel(dataInfo)">取消</b-u-button-theme-plain>
					<b-u-button-theme width="160rpx" height="64rpx" size="26rpx" style="margin-left: 14rpx;" v-if="dataInfo.order_status.value == 10 && dataInfo.pay_status.value == 10" @click.stop="handlePay(dataInfo)">立即支付</b-u-button-theme>

					<b-u-button-theme-plain  width="160rpx" height="64rpx" size="26rpx" v-if="dataInfo.order_status.value == 30 && dataInfo.is_order_refund !=2 && dataInfo.is_invoice==0 && dataInfo.is_ticket==1" @click="handleInvoice(0)">开具发票</b-u-button-theme-plain>
					<b-u-button-theme-plain  width="160rpx" height="64rpx" size="26rpx" v-if="dataInfo.order_status.value == 30 && dataInfo.is_order_refund !=2 && dataInfo.is_invoice!=0" @click="handleInvoice(1)">查看发票</b-u-button-theme-plain>

					<b-u-button-theme-plain  width="160rpx" height="64rpx" size="26rpx" style="margin-left: 14rpx;" v-if="dataInfo.order_status.value != 20 && dataInfo.pay_status.value == 20 && (dataInfo.receipt_status.value == 10||dataInfo.receipt_status.value == 20 )&& dataInfo.is_order_refund == 0" @click.stop="jump('/pages/mine/order/refund?order_id='+dataInfo.order_id)">申请售后</b-u-button-theme-plain>
					<b-u-button-theme-plain  width="160rpx" height="64rpx" size="26rpx" style="margin-left: 14rpx;" v-if="dataInfo.order_status.value != 20 && dataInfo.pay_status.value == 20 && (dataInfo.receipt_status.value == 10||dataInfo.receipt_status.value == 20 )&& dataInfo.is_order_refund != 0"  @click.stop="jump('/pages/mine/order/refund_after?order_id='+dataInfo.order_id)">查看售后</b-u-button-theme-plain>

					<b-u-button-theme  width="160rpx" height="64rpx" size="26rpx" style="margin-left: 14rpx;" v-if="dataInfo.order_status.value == 30 && dataInfo.is_comment == 0 && dataInfo.is_order_refund == 0" @click.stop="jump('/pages/mine/order/comment?order_id='+dataInfo.order_id)">评价</b-u-button-theme>
					<b-u-button-theme  width="160rpx" height="64rpx" size="26rpx" style="margin-left: 14rpx;" v-if="dataInfo.order_status.value !=10" @click.stop="anotherOrder(dataInfo)">再来一单</b-u-button-theme>
			</view>
			<safe-area-inset-bottom></safe-area-inset-bottom>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				dataInfo: {},
				sendTime: 0,
				includePoints: [],
				markers: [],
				includePointsOld: [],
				markersOld: [],
				distance: '',
				timer: null,
				gift_product_order:null,
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getHttp();
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			// 再来一单
			anotherOrder(item){
				uni.$u.api.postCartAddOrder({order_id: item.order_id}).then(res => {
					uni.navigateTo({
						url: '/pages/cart/settle/settle?order_type=cart&cart_ids='+res.cart_id,
					})
				})
			},
			handlePhone(Phone) {
				uni.makePhoneCall({
					phoneNumber: Phone
				});
			},
			handleCopy(text) {
				uni.setClipboardData({
					data: text.toString(),
				});
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleInvoice(type) {
				if(type == 0){
					this.jump('/pages/mine/invoice/issue?order_id='+this.dataInfo.order_id+'&shop_supplier_id='+this.dataInfo.supplier.shop_supplier_id);
				}else{
					this.jump('/pages/mine/invoice/details?order_id='+this.dataInfo.order_id+'&shop_supplier_id='+this.dataInfo.supplier.shop_supplier_id);
				}
			},
			goToProduct(is_click,id,product_type,activity_product_id){
				if(product_type == "discount"){
					this.jump('/pages/categoty/product/product_limited?id='+id)
				}else if(product_type == "pt"){
					if(is_click == 0){
						this.jump('/pages/categoty/product/product?id='+id);
					}
				}else{
					this.jump('/pages/categoty/product/product_active?id='+id+'&activity_product_id='+activity_product_id);
				}
			},
			handlePay(item) {
				uni.$u.api.postPay({
					order_id: item.order_id,
					pay_source: 'wx',
					payType: '20',
					use_balance: 0,
				}).then(res => {
					const join = res.is_join
					const url =
						res.is_join == 1
							? '/pages/active/champion/european?order_no=' +
								res.order_no
							: '/pages/mine/order/list?dataType=all';
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: res.payment.time_stamp,
						nonceStr: res.payment.nonce_str,
						package: res.payment.package,
						signType: res.payment.sign_type,
						paySign: res.payment.pay_sign,
						success(res) {
							uni.showToast({
								title: "支付成功",
							})
							if (join == 1) {
								setTimeout(() => {
									uni.navigateTo({
										url
									})
								}, 1000)
							}
							this.pageForm.page = 1;
							this.orderList = [];
							this.getOrder();
						},
						fail(e) {
							uni.showToast({
								title: "支付失败",
								icon: "none"
							})
						}
					})
				})
			},
			handleCancel(item) {
				uni.showModal({
					title: '提示',
					content: '您确定要取消吗？',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							uni.$u.api.getOrderCancel({
								order_id: item.order_id,
							}).then(res => {
								this.getOrderDetail();
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getAsyncGetCoord() {
				uni.$u.api.getAsyncGetCoord({
					order_id: this.id,
				}).then(res => {
					if(this.includePointsOld.length > 1) {
						this.includePointsOld[1] = {
							longitude: Number(res.async_lng),
							latitude: Number(res.async_lat)
						};
						this.markersOld[1] = {
							id: 2,
							iconPath: this.$setting.imageUrl()+'qishou.png',
							width: 50,
							height: 50,
							longitude:  Number(res.async_lng),
							latitude: Number(res.async_lat)
						};
					} else {
						this.includePointsOld.push({
							longitude: Number(res.async_lng),
							latitude: Number(res.async_lat)
						});
						this.markersOld.push({
							id: 2,
							iconPath: this.$setting.imageUrl()+'qishou.png',
							width: 50,
							height: 50,
							longitude:  Number(res.async_lng),
							latitude: Number(res.async_lat)
						});
					}
					
					if(!uni.$u.test.isEmpty(this.distance)) {
						this.markersOld[1] = {
							id: 2,
							iconPath: this.$setting.imageUrl()+'qishou.png',
							width: 50,
							height: 50,
							longitude:  Number(res.async_lng),
							latitude: Number(res.async_lat),
							callout: {
								content: this.distance,
								display: "ALWAYS",
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius: 8,
								color: "#333333",
								fontSize: 12,
								padding: 5,
							}
						};
					}
					
					this.markers = [];
					
					this.includePoints = this.includePointsOld;
					
					setTimeout(() => {
						this.markers = this.markersOld;
					}, 50)
				})
			},
			getConfigData() {
				uni.$u.api.getConfigData({type: "sendTime"}).then(res => {
					this.sendTime = res.list[0].value;
				})
			},
			getOrderDetail() {
				uni.$u.api.getOrderDetail({
					order_id: this.id,
					pay_source: 'wx',
				}).then(res => {
					this.dataInfo = res.order;
					this.distance = res.distance;
					this.gift_product_order = this.dataInfo.gift_product_order?this.dataInfo.gift_product_order:null;
					
					this.$nextTick(() => {
						this.includePointsOld = [{
							longitude: Number(this.dataInfo.address.longitude),
							latitude: Number(this.dataInfo.address.latitude)
						}];
						
						this.markersOld = [
							{
								id: 1,
								iconPath: this.$setting.imageUrl()+'kehu.png',
								width: 50,
								height: 50,
								longitude: Number(this.dataInfo.address.longitude),
								latitude: Number(this.dataInfo.address.latitude),
							}, 
						];
						
						this.includePoints = this.includePointsOld;
						this.markers = this.markersOld;
						
						if(this.dataInfo.order_status.value == 10 && this.dataInfo.delivery_status.value == 20 && this.dataInfo.receipt_status.value == 10) {
							this.getAsyncGetCoord();
							this.timer = setInterval(() => {
								this.getAsyncGetCoord();
							}, 10000)
						}
					})
				})
			},
			getHttp() {
				this.getOrderDetail();
				this.getConfigData();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(180deg, #BB0024 0%, #F6F6F6 440rpx);
		padding: 20rpx 30rpx;
		
		.status {
			font-size: 36rpx;
			color: #FEFFFE;
			text-align: center;
		}
		
		.address {
			margin-top: 22rpx;
			font-size: 24rpx;
			color: #EDEDED;
			text-align: center;
		}
		
		.map {
			margin-top: 30rpx;
			width: 100%;
			height: 366rpx;
			border-radius: 24rpx;
			overflow: hidden;
			
			map {
				width: 100%;
				height: 100%;
			}
		}
		
		.time {
			margin-top: 20rpx;
			border-radius: 16rpx;
			padding: 20rpx 34rpx;
			
			.time-top {
				font-size: 28rpx;
				color: #111111;
				font-weight: bold;
				
				text {
					color: $uni-color-theme;
				}
			}
			
			.time-tips {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #111111;
			}
		}
		
		.item {
			margin-top: 20rpx;
			padding: 26rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			
			.item-shop {
				border-bottom: 1px solid rgba(225, 225, 225, 0.7);
				padding-bottom: 20rpx;
			}
			
			.item-shop-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #111111;
			}
			
			.item-shop-status {
				font-size: 24rpx;
				color: $uni-color-theme;
			}
			.product-item-gift {
					margin: 10rpx 0;
					padding: 20rpx;
					background: rgba(225, 225, 225, 0.7);
					border-radius: 20rpx;
				}
			.product-item {
				margin-top: 24rpx;
			
				.product-item-image {
					width: 128rpx;
					height: 128rpx;
				}
			
				.product-item-con {
					margin-left: 16rpx;
					flex: 1;
			
					.product-item-name {
						width: 480rpx;
						font-size: 28rpx;
						color: #111111;
					}
			
					.product-item-suk {
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}
			
					.product-item-num {
						font-size: 24rpx;
						color: #999999;
					}
			
					.product-item-price {
						font-size: 28rpx;
						color: $uni-color-theme;
					}
				}
			}
		}
		
		.total {
			padding: 0 30rpx;
			border-radius: 16rpx;
			
			.total-item {
				padding: 20rpx 0;
				font-size: 32rpx;
				color: #333333;
				
				text {
					color: $uni-color-theme;
					font-weight: bold;
				}
			}
			
			.total-item + .total-item {
				margin-top: 1px solid #ECECEC;
			}
		}
		
		
		.info {
			padding: 0 30rpx;
			border-radius: 16rpx;
			margin-top: 20rpx;
			
			.info-item {
				padding: 20rpx 0;
				
				.info-item-label {
					font-size: 24rpx;
					color: #666666;
				}
				
				.info-item-value {
					font-size: 24rpx;
					text-align: right;
					color: #111111;
					margin-left: 30rpx;
					word-wrap: break-word;
					word-break: break-all;
				}
			}
		}
		
		.fixed-bottom { 
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			
			.fixed-bottom-con {
				padding: 12rpx 30rpx;
				justify-content: space-evenly;
			}
		}
		
		.fixed-bottom-placeholder {
			height: 100rpx;
		}
	}
</style>
